<template>
    <rx-layout>
        <div slot="center">
            <rx-fit :isheader="isheader">
                <div slot="toolheader" border="false" foldbtn="false">
                    <span class="search-btn-box" v-if="!isheader">
                        <span class="search-btn" @click.stop="searchshow"
                            ><i class="iconfont iconguolv"></i>{{ $ti18('rxList.leachBtn', '过滤') }}</span
                        >
                    </span>
                </div>
                <div
                    btnalign="right"
                    slot="searchbar"
                    v-if="fitSearch"
                    @search="search"
                    @cancel="cancel"
                    @close="closeSearchbar"
                >
                    <a-form :layout="colLayout">
                        <a-row :gutter="24">
                            <a-col :span="colSpan">
                                <a-form-item :label="i18n('form.subject', '标题')">
                                    <a-input
                                        :placeholder="i18n('form.subject', '标题', 'input')"
                                        v-model="queryParam.Q_SUBJECT__S_LK"
                                    />
                                </a-form-item>
                            </a-col>
                            <a-col :span="colSpan">
                                <a-form-item :label="i18n('form.abstract', '摘要')">
                                    <a-input
                                        :placeholder="i18n('form.abstract', '摘要', 'input')"
                                        v-model="queryParam.Q_KEYWORDS__S_LK"
                                    />
                                </a-form-item>
                            </a-col>
                        </a-row>
                    </a-form>
                </div>
                <rx-grid
                    ref="table"
                    :bordered="isBorder"
                    :allowRowSelect="true"
                    :multiSelect="true"
                    :columns="columns"
                    :defaultPageSize="10"
                    url="/api-portal/portal/core/insNews/getAllIssuedNews"
                    :queryParam="queryParam"
                    data-field="result.data"
                    :pageSizeOptions="['10', '30', '40']"
                    id-field="newId"
                    @selectChange="onSelectChange"
                >
                    <span slot="subject" slot-scope="{ text, record }">
                        <a-tag :color="'green'" v-if="record.sysDicNew == 'companyNews'">
                            {{ i18n('list.news', '公司新闻') }}
                        </a-tag>
                        <a-tag :color="'blue'" v-else-if="record.sysDicNew == 'companyNotice'">
                            {{ i18n('list.Announcement', '公司公告') }}
                        </a-tag>
                        <a @click="showDetail(record)">{{ text }}</a>
                    </span>
                    <span slot="author" slot-scope="{ text, record }">
                        <a-tag :color="'green'">
                            <rx-user-info :userId="record.author" :showAccount="true"></rx-user-info>
                        </a-tag>
                    </span>
                    <span slot="status" slot-scope="{ text, record }">
                        <a-tag :color="statusMap[text].color">
                            <span>{{ statusMap[text].text }}</span>
                        </a-tag>
                    </span>
                    <span slot="action" slot-scope="{ text, record }" class="actionIcons">
                        <span @click.stop="showDetail(record)">{{ i18n('list.view', '查看') }}</span>
                    </span>
                </rx-grid>
            </rx-fit>
        </div>
    </rx-layout>
</template>

<script>
import InsNewsApi from '@/api/portal/core/insNews'
import { BaseList, RxUserInfo } from '@lowcode/jpaas-common-lib'
export default {
    name: 'insNews',
    mixins: [BaseList],
    components: {
        'rx-user-info': RxUserInfo,
    },
    data() {
        return {
            columns: [
                {
                    title: '序号',
                    dataIndex: 'serial',
                    type: 'indexColumn',
                    scopedSlots: { customRender: 'serial' },
                    width: 50,
                },
                {
                    title: this.i18n('form.subject', '标题'),
                    dataIndex: 'subject',
                    width: 200,
                    scopedSlots: { customRender: 'subject' },
                },
                { title: this.i18n('form.abstract', '摘要'), dataIndex: 'keywords', width: 180 },
                { title: this.i18n('form.readTimes', '阅读次数'), dataIndex: 'readTimes', width: 80 },
                {
                    title: this.i18n('form.author', '作者'),
                    dataIndex: 'author',
                    width: 80,
                    scopedSlots: { customRender: 'author' },
                },
                {
                    title: this.i18n('form.status', '状态'),
                    dataIndex: 'status',
                    width: 80,
                    scopedSlots: { customRender: 'status' },
                },
                {
                    title: this.$ti18('rxList.action', '操作'),
                    dataIndex: 'action',
                    scopedSlots: { customRender: 'action' },
                    width: 80,
                },
            ],
            comment: this.i18n('list.newsAnnounce', '新闻公告'),
            widthHeight: ['1000px', '600px'],
            statusMap: {
                Issued: { color: 'green', text: this.i18n('form.publish', '发布') },
                Draft: { color: 'red', text: this.i18n('form.draft', '草稿') },
            },
        }
    },
    methods: {
        i18n(name, text, key) {
            return this.$ti18(name, text, 'InsNews', key)
        },
        getListByParams(parameter) {
            return InsNewsApi.query(parameter)
        },
        search() {
            this.$refs.table.loadData()
        },
        cancel() {
            this.resetSearch()
        },
        closeSearchbar() {
            //关闭过滤弹窗；（点击X触发）
            this.fitSearch = false
        },
        //显示明细
        showDetail(record) {
            var self_ = this
            InsNewsApi.getInsNews(
                {
                    curVm: this,
                    data: { pkId: record.newId, single: true },
                    widthHeight: ['1000px', '700px'],
                },
                function (self_, data) {}
            )
        },
    },
}
</script>
<style scoped></style>
